<style type="text/less">
    @import "/web/public/public.less";
    #fragment-index-hot-search{
        .title{
            margin: 20px 0 10px;
            font-size: 20px;
            a{
                .fr;
                font-size: 14px;
                color: #7f7f7f;
                line-height: 20px;
            }
            .title_link{
                display: inline-block;
                vertical-align: middle;
                margin-left: 10px;
                font-size: 20px;
                color: #333333;
                line-height: 26px;
            }
        }
        .tab-list{
            font-size: 0;
            line-height: 70px;
            &>li{
                display: inline-block;
                color: #000000;
                width: 33.3%;
                text-align: center;
                letter-spacing: 0;
                font-size: 18px;
                border-bottom: 4px solid #EEEEEE;
                cursor: pointer;

                &.active{
                    color: #e60013;
                    border-color: #E60012;
                    cursor: default;
                }
            }
        }
        .bid-list{
            font-size: 14px;
            line-height: 36px;
            padding: 10px 0;
            &>li{
                position: relative;
                &:before{
                    content: '·';
                    font-weight: bold;
                    margin-right: 5px;
                    color: #E1E1E1;
                    font-size: 20px;
                }
                h3{
                    display: inline-block;
                    width: 92%;
                    height: 36px;
                    font-weight: normal;
                    vertical-align: middle;
                    .ellipsis;
                    a{
                        width: 80%;
                        height: 36px;
                        color: #6e6e6e;
                    }
                }
            }
        }
        .look-all{
            border:1px solid #E0E0E0;
            line-height: 40px;
            text-align: center;
            font-size: 14px;
            a{
                color: #e50012;
            }
            .icon-xiala1{
                font-size: 10px;
            }
        }
    }
</style>
<script src="/web/lib/less.min.js"></script>
<#if channel.channelStatus == 1>
    <div id="fragment-index-hot-search" data-num="${channel.channelCount}">
        <div class="title">
            <h2 class="title_h2">
                <i class="title-line"></i>
                <a class="title_link" href="javascript:">${channel.channelName}</a>
            </h2>
        </div>
        <ul class="tab-list">
            <li class="active">日</li>
            <li>周</li>
            <li>月</li>
        </ul>
        <ul class="bid-list"></ul>
        <div class="look-all">
            <a href="${"${domainJiaJu}/web/list/${channel.channelRewriteUrl}/index_1.html"}" target="_blank">查看完整榜单<i class="iconfont icon-xiala1"></i></a>
<#--            <a href="${"${domainJiaJu}/web/furniture-list.html?id=111&column=${channel.channelName}"}">查看完整榜单<i class="iconfont icon-xiala1"></i></a>-->
        </div>
    </div>
</#if>
<script src="/web/public/public.js"></script>
<#if channel.channelStatus == 1>
    <script>
        $(function () {
            function getloadChannelHotSearchData(type) {
                var data = {
                    plateId: 111,
                    pageNum: 1,
                    pageSize: $('#fragment-index-hot-search').data('num'),
                    queryType: type
                };
                $.ajax({
                    url: ports.loadChannelHotSearchData,
                    data: data,
                    success: function (res) {
                        console.log('获取热搜榜数据',res)
                        var html = '';
                        var list = res.data.list;

                        $.each(list,function (i,item) {
                            html += '<li>\n' +
                                '            <h3><a target="_blank" href='+ (item.articleOutLinkStatus?item.articleOutLink:item.articleUrl) +'>\n' +
                                item.articleTitle +
                                '            </a></h3>\n' +
                                '        </li>'
                        });
                        $('#fragment-index-hot-search .bid-list').html(html);
                    }
                })
            }
            getloadChannelHotSearchData(1);

            var $aTabLi = $('#fragment-index-hot-search ul.tab-list>li');
            $aTabLi.click(function () {
                $aTabLi.removeClass('active')
                $(this).addClass('active');
                getloadChannelHotSearchData($(this).index()+1);
            });
        })
    </script>
</#if>